"use client";

import axiosInstance from "@/utils/axios";
import { Spin, message, Table } from "antd";
import { Suspense, useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { columns } from "./dataUtils";
import dynamic from "next/dynamic";

const HiglassWrapper = dynamic(() => import("@/components/HiglassWrapper"), {
    ssr: false, // 禁用服务器端渲染
    loading: () => <Spin size="large" />,
});

export default function CompareClient() {
    const params:any = useParams();
    const idsParam = decodeURIComponent(params.ids);

    const [loading, setLoading] = useState<boolean>(false);
    const [speciesNames, setSpeciesNames] = useState<string>(""); // "sp1,sp2,sp3"
    const [data, setData] = useState([]);

    useEffect(() => {
        let mounted = true;
        if (!idsParam) return;
        const fetchDetails = async () => {
            if (!idsParam) return;
            try {
                setLoading(true);
                const res = await axiosInstance.get("/species/getDetails", {
                    params: { ids: idsParam },
                });

                const names = res.data.data
                    .map((item: any) => (item.targetName ?? "").trim())
                    .filter(Boolean);

                setData(res.data.data || []);

                const uniqueNames: string[] = Array.from(new Set(names));
                const speciesStr = uniqueNames.join(",");

                if (mounted) setSpeciesNames(speciesStr);
            } catch (error) {
                console.error(error);
                message.error("Failed to fetch species details.");
            } finally {
                if (mounted) setLoading(false);
            }
        };

        fetchDetails();

        return () => {
            mounted = false;
        };
    }, [idsParam]); 

    return (
        <Suspense>
            <div className="container mx-auto p-8">
                <h1 className="text-2xl font-bold mb-6">
                    Multi Species Compare
                </h1>
                <div className="p-6">
                    <h2 className="text-2xl font-bold mb-4">
                        Multi Species Information
                    </h2>
                    <Table
                        rowKey="id"
                        columns={columns}
                        dataSource={data}
                        loading={loading}
                        bordered
                        pagination={false}
                    />
                </div>
                <div className="p-6 w-full">
                    <h2 className="text-2xl font-bold mb-4">
                        Higlass Information
                    </h2>
                    {loading ? (
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "center",
                                padding: 40,
                            }}
                        >
                            <Spin size="large" />
                        </div>
                    ) : (
                        <>
                            {speciesNames.split(",").filter(Boolean).length ===
                            0 ? (
                                <div style={{ padding: 20 }}>
                                    No mcool files found
                                </div>
                            ) : (
                                <HiglassWrapper
                                    speciesNames={speciesNames}
                                    viewHeight={500}
                                />
                            )}
                        </>
                    )}
                </div>
            </div>
        </Suspense>
    );
}
